<template>
  <div class="task-box task-list-view">
    <div id="task-task-list-view"></div>
    <!-- s 列表展示 -->
    <div
      class="task-list-view common-list-container flex-y"
      ref="taskListPage"
    >
      <div ref="tableHeaderContainer"></div>

      <div class="common-list-section">
        <div ref="tableDoContainer" class="task-list-operation-bar-container task-flex task-ai">
          <div class="action-button-group task-flex task-ai">
            <!-- 选择列 -->
            <div class="guide-box">
              <div
                :class="['task-ai', 'task-flex', 'task-font14', 'task-c6', 'task-pointer', ' cur-point']"
                id="v-task-step-1"
                @click="showColumnsSetting"
                v-track="$track.formatParams('SELECT_COLUMN')"
              >
                <span class="task-mr4">{{$t('common.base.choiceCol')}}</span>
                <i class="iconfont icon-fdn-select"></i>
              </div>
            </div>
          </div>
        </div>
        <!-- start content 列表表格 -->
        <div class="guide-box" id="v-task-step-0">
          <div ref="tableContainer">
            <div
              class="task-list-section common-list-table-view min-h-440"
              v-loading="loading"
            >
              <el-table
                v-table-style
                v-if="columns.length"
                stripe
                :data="taskPage.list"
                :highlight-current-row="false"
                :key="tableKey"
                :border="true"
                @select="handleSelection"
                @select-all="handleSelection"
                @sort-change="sortChange"
                @header-dragend="headerDragend"
                :class="['task-list-table', 'common-list-table', 'bbx-normal-list-box']"
                header-row-class-name="common-list-table-header taks-list-table-header bg-w"
                ref="multipleTable"
                :height="tableContainerHeight"
              >
                <template slot="empty">
                  <BaseListForNoData v-show="!loading" :notice-msg="$t('common.base.tip.noData')"></BaseListForNoData>
                </template>
                
                <el-table-column
                  v-for="column in columns"
                  v-if="column && column.show"
                  :align="column.align"
                  :class-name="
                    column.field == 'name'
                      ? 'common-list-table-name-superscript-td'
                      : ''
                  "
                  :key="column.field"
                  :label="column.label"
                  :min-width="column.minWidth"
                  :prop="column.field"
                  :sortable="column.sortable"
                  :show-overflow-tooltip="getCommonListShowTooltip(column)"
                  :width="column.width"
                  :resizable="true"
                  :fixed="column.fixLeft || column.fixed || false"
                >
                  <template slot-scope="scope">
                    <!-- 工单编号 -->
                    <div
                      v-if="column.field === 'taskNo'"
                      :class="{ superscript: scope.row.guideData }"
                      class="table-blacklist"
                    >
                      <a
                        href=""
                        :class="globalIsHaveTaskViewDetailAuth ? 'view-detail-btn task-list-numbering' : 'view-detail-btn-disabled'"
                        @click.stop.prevent="
                          openTaskTab(scope.row.taskId, scope.row[column.field])
                        "
                      >
                        {{ scope.row[column.field] }}
                      </a>
                      <!-- 质检异常标签 -->
                      <span
                        class="task-state-block task-state-block-intelligent task-font12"
                        v-if="scope.row && scope.row.attribute && scope.row.attribute.intelligentCheckStateStr == 1"
                      >
                        {{$t('common.task.qualityTestingStatus.abnormal')}}
                      </span>
                      <!-- TODO: 曾超时 审批中标签 -->
                      <!-- 暂停中 -->
                      <span v-if="scope.row.inApprove == 1">
                        <span
                          class="task-state-block task-state-block-quality-approve task-font12"
                          v-if="scope.row && scope.row.qualityEntity && scope.row.qualityEntity.inApprove == 1"
                        >
                          {{$t('common.task.qualityGuarantee.approve')}}
                        </span>
                        <span v-else class="task-state-block task-state-block-approve task-font12">
                          {{$t('common.task.qualityGuarantee.inApprove')}}
                        </span>
                      </span>
                      
                      <!-- 异常标签 -->
                      <span
                        class="task-state-block task-state-block-overtime task-font12"
                        :class="{'task-state-block-approve': v === $t('common.task.exceptionStatus.allot') || v === $t('common.task.exceptionStatus.rollback'), 'task-state-block-ff': v === $t('common.task.exceptionStatus.oncePaused') || v === $t('common.task.exceptionStatus.onceOverTime') || v === $t('common.task.exceptionStatus.onceRefused')}"
                        v-for="(v, i) in abnormalHover(scope.row)"
                        :key="i"
                        v-show="i < 2"
                      >
                        {{v}}
                      </span>

                      <el-tooltip
                        v-if="abnormalHover(scope.row).length > 2"
                        :content="abnormalHover(scope.row).join(',')"
                        placement="top"
                      >
                        <span class="task-ml4">...</span>
                      </el-tooltip>
                    </div>

                    <!-- 客户  TODO: 客户查看权限 -->
                    <template v-else-if="column.field === 'customer'">
                      <div
                        :class="{
                          'view-detail-btn task-client': scope.row.linkAuth,
                        }"
                        @click.stop="openClientTab(scope.row)"
                      >
                        {{scope.row.customerEntity && scope.row.customerEntity.name}}
                      </div>
                    </template>

                    <!-- TODO 连接器灰度控制  -->
                    <template v-else-if="column.formType === 'connector'">
                      <div v-if="scope.row.attribute && scope.row.attribute[column.field]" class="view-detail-btn task-client" @click.stop="openConnectorDialog(column, scope.row)">
                        {{$t('common.base.view')}}
                      </div>
                    </template>
                    <!-- 创建方式 -->
                    <template v-else-if="column.field === 'source'">
                      <span>{{ getSoureceLabel(scope.row["source"])}}</span>
                    </template>

                    <!-- 关联事件 -->
                    <template v-else-if="column.field === 'eventNo'">
                      <div class="view-detail-btn task-client"
                          @click.stop="openEventTab(scope.row)"
                      >
                        {{ scope.row["eventNo"]}}
                      </div>
                    </template>
                    <!-- 联系人 -->
                    <template v-else-if="column.field === 'tlmName'">
                      <div>
                        {{ scope.row["linkMan"] && scope.row["linkMan"].name }}
                      </div>
                    </template>
                    <!-- 质保start -->
                    <template v-else-if="column.field === 'qualityStartTime'">
                      <div>
                        {{ scope.row["qualityEntity"] && scope.row["qualityEntity"].qualityStartTime }}
                      </div>
                    </template>
                    <template v-else-if="column.field === 'qualityEndTime'">
                      <div>
                        {{ scope.row["qualityEntity"] && scope.row["qualityEntity"].qualityEndTime }}
                      </div>
                    </template>
                    <template v-else-if="column.field === 'qualityStatus'">
                      <div>
                        {{ scope.row["qualityEntity"] && scope.row["qualityEntity"].qualityStatus | qualityStatus }}
                      </div>
                    </template>
                    <template v-else-if="column.field === 'serialNumber'">
                      <span>{{ productSerialNumberFormat(scope.row.task.products) }}</span>
                    </template>
                    <!-- 质保end -->
                    <!-- 电话 -->
                    <template v-else-if="column.field === 'tlmPhone'">
                      <div>
                        {{ scope.row["linkMan"] && scope.row["linkMan"].phone }}
                        <template v-if="scope.row.linkMan && scope.row.linkMan.phone">
                          <i v-if=" customerSetting.linkmanOn && hasCallAuth && callCenterModule" class="iconfont icon-fdn-phone" :title="$t('common.base.dial')" @click="makePhoneCall(scope.row['linkMan'].phone, true)"></i>
                        </template>
                      </div>
                    </template>
                    <template v-else-if="column.formType === 'phone'">
                      <div>
                        {{ scope.row.attribute[column.field] }}
                        <i
                          v-if="hasCallAuth && callCenterModule && scope.row.attribute[column.field]"
                          class="iconfont icon-fdn-phone"
                          title="拨打电话"
                          @click="makePhoneCall(scope.row.attribute[column.field], false)"
                        ></i>
                      </div>
                    </template>
                    <!-- 是否重复报修 -->
                    <template v-else-if="column.field === 'isRepeatRepair'">
                      <span :style="{color: column.setting.color || '#F4882F'}">{{scope.row.attribute[column.field] || $t('common.base.no')}}</span>
                    </template>
                    <!-- 自定义的选择类型字段显示， 与type 区别-->
                    <template
                      v-else-if="column.formType === 'select' && !column.isSystem"
                    >
                      {{ scope.row.attribute[column.field] | displaySelect }}
                    </template>

                    <!-- 更新时间 -->
                    <template v-else-if="column.field === 'updateTime'">
                      <template v-if="scope.row.latesetUpdateRecord && !isOpenData">
                        <el-tooltip
                          :content="scope.row.latesetUpdateRecord"
                          class="item"
                          effect="dark"
                          
                          placement="top"
                        >
                          <div @mouseover="showLatestUpdateRecord(scope.row)">
                            {{ scope.row.updateTime | fmt_datetime }}
                          </div>
                        </el-tooltip>
                      </template>
                      <template v-else>
                        <div @mouseover="showLatestUpdateRecord(scope.row)">
                          {{ scope.row.updateTime | fmt_datetime }}
                        </div>
                      </template>
                    </template>

                    <template v-else-if="column.formType === 'logistics'">
                      <biz-list-logistics-no
                        :row="scope.row"
                        :column="column"
                        :is-link="isCanLogisticsNoLink(column)"
                        mode="task"
                        :biz-id="scope.row.id"
                      />
                    </template>
                    <!-- 产品 -->
                    <template v-else-if="column.field === 'product'">
                      {{
                        scope.row.products &&
                          scope.row.products
                            .map((product) => product.name)
                            .join(", ")
                      }}
                    </template>

                    <!-- 创建人 和 负责人 、派单人 -->
                    <template
                      v-else-if="
                        column.field === 'createUserName' ||
                          column.field === 'executorName' ||
                          column.field === 'allotName'
                      "
                    >
                      <template v-if="permissionTaskView">
                        <a
                          href=""
                          class="view-detail-btn view-user-detail-btn"
                          @click.stop.prevent="
                            openUserTab(
                              presonDisplayObj('userId', column.field, scope.row)
                            )
                          "
                        >
                          <template v-if="isOpenData">
                            <template v-if="column.field === 'createUserName' && scope.row.createUser">
                              <open-data type="userName" :openid="scope.row.createUser.staffId"></open-data>
                            </template>  
                            <template v-else-if="column.field === 'executorName' && scope.row.executorUser">
                              <open-data type="userName" :openid="scope.row.executorUser.staffId"></open-data>
                            </template>  
                            <template v-else-if="column.field === 'allotName' && scope.row.allotUser">
                              <open-data type="userName" :openid="scope.row.allotUser.staffId"></open-data>
                            </template>  
                          </template>
                          <template v-else> 
                            {{
                              presonDisplayObj("displayName", column.field, scope.row)
                            }}
                          </template>
                        </a>
                      </template>
                      <template v-else>
                        <template v-if="isOpenData">
                          <template v-if="column.field === 'createUserName' && scope.row.createUser">
                            <open-data type="userName" :openid="scope.row.createUser.staffId"></open-data>
                          </template>  
                          <template v-else-if="column.field === 'executorName' && scope.row.executorUser">
                            <open-data type="userName" :openid="scope.row.executorUser.staffId"></open-data>
                          </template>  
                          <template v-else-if="column.field === 'allotName' && scope.row.allotUser">
                            <open-data type="userName" :openid="scope.row.allotUser.staffId"></open-data>
                          </template>  
                        </template>
                        <template v-else> 
                          {{
                            presonDisplayObj("displayName", column.field, scope.row)
                          }}
                        </template>
                      </template>
                    </template>

                    <!-- 协同人 -->
                    <template v-else-if="column.field === 'synergies'">
                      <template v-if="isOpenData && scope.row[column.field]">
                        <open-data v-for="synergie in scope.row[column.field]" :key="synergie.staffId" type="userName" :openid="synergie.staffId"></open-data>
                      </template>
                      <template v-else>
                        {{
                          scope.row[column.field] &&
                            scope.row[column.field]
                              .map((synergie) => synergie.displayName)
                              .join(", ")
                        }}
                      </template>
                    </template>
                    
                    <!-- 自定义人员 -->
                    <template v-else-if="column.formType === 'user' && scope.row.attribute[column.field]">
                      <template v-if="isOpenData">
                        <open-data v-for="staffId in getUserIds(scope.row.attribute[column.field])" :key="staffId" type="userName" :openid="staffId"></open-data>
                      </template>
                      <template v-else>
                        {{ getUserName(scope.row.attribute[column.field]) }}
                      </template>
                    </template>

                    <!-- 客户产品关联字段 -->
                    <template v-else-if="isOpenData && (column.formType === 'relationCustomer'|| column.formType === 'relationProduct') && column.setting && (column.setting.formType === 'user' || column.setting.fieldName === 'customerManager') && scope.row.attribute && scope.row.attribute[column.field]">
                      <template v-if="column.setting.formType === 'user'">
                        <open-data v-for="staffId in getRelationUserIds(scope.row.attribute[column.field])" :key="staffId" type="userName" :openid="staffId"></open-data>
                      </template>
                      <template v-else>
                        <open-data type="userName" :openid="scope.row.attribute[column.field]"></open-data>
                      </template>
                    </template>

                    <!-- 派单方式 -->
                    <template v-else-if="column.field === 'allotTypeStr'">
                      {{ allotTypeText(scope.row.allotType) }}
                    </template>

                    <!-- 服务部门(负责人所在的部门) -->
                    <template v-else-if="column.field === 'executorTags'">
                      {{ formatExecutorTags(scope.row[column.field]) }}
                    </template>

                    <!-- 审批状态 -->
                    <template v-else-if="column.field === 'inApprove'">
                      {{ scope.row.inApprove | displayApprove }}
                    </template>
                    <!-- 工单状态 -->
                    <template v-else-if="column.field === 'state'">
                      <template v-if="!scope.row.taskId">
                        {{$t('task.taskTypes.planTask.toBeCreate')}}
                      </template>
                      <template v-else>
                        <!-- 暂停中 -->
                        <div
                          class="task-state-block task-font12 table-blacklist"
                          v-if="scope.row.isPaused == 1"
                          style="
                          color: #FFF;
                          background-color: rgba(255, 77, 79, 1);
                        "
                        >
                          {{$t('task.list.paused')}}
                        </div>
                        <!-- 其他状态 -->
                        <div
                          v-else
                          class="task-state-block task-font12 table-blacklist"
                          :style="{
                            backgroundColor: taskStateEnum.getBgColor(
                              scope.row[column.field],
                              1
                            ),
                            color: '#FFF'
                          }"
                        >
                          {{
                            scope.row[column.field] &&
                              taskStateEnum.getName(scope.row[column.field])
                          }}
                        </div>
                      </template>
                    </template>

                    <!-- 曾.. -->
                    <template
                      v-else-if="taskStatusFields.indexOf(column.field) > -1"
                    >
                      {{ Number(scope.row[column.field]) === 1 ? $t('common.base.yes') : $t('common.base.no') }}
                    </template>
                    <!-- 富文本 -->
                    <template v-else-if="column.formType === 'richtext'">
                      <div class='view-detail-btn' @click.stop="openRichtextVisible(scope.row, column)">
                        <span v-if="scope.row.attribute[column.field]">{{$t('common.base.view')}}</span>
                      </div>
                    </template>

                    <!-- 地址 -->
                    <template v-else-if="column.formType === 'address'">
                      {{ formatCustomizeAddress(scope.row, column) }}
                    </template>

                    <!-- start 故障库 -->
                    <template v-else-if="column.field === 'budgetAmountMax'">
                      {{
                        scope.row.esFaultLibrary && scope.row.esFaultLibrary.budgetAmountMax
                      }}
                    </template>
                    <template v-else-if="column.field === 'budgetAmountMin'">
                      {{
                        scope.row.esFaultLibrary && scope.row.esFaultLibrary.budgetAmountMin
                      }}
                    </template>
                    <template v-else-if="column.field === 'productType'">
                      {{
                        scope.row.esFaultLibrary && scope.row.esFaultLibrary.productType
                      }}
                    </template>
                    <template v-else-if="column.field === 'faultReason'">
                      {{
                        scope.row.esFaultLibrary && scope.row.esFaultLibrary.faultReason
                      }}
                    </template>
                    <template v-else-if="column.field === 'faultScene'">
                      {{
                        scope.row.esFaultLibrary && scope.row.esFaultLibrary.faultScene
                      }}
                    </template>
                    <!-- end 故障库 -->

                    <!-- start 服务商 -->
                    <template v-else-if="column.field === 'serviceProviders'">
                      {{
                        scope.row.serviceProviderSubForm &&
                          scope.row.serviceProviderSubForm
                            .map((serviceProvider) => serviceProvider.providerName)
                            .join(", ")
                      }}
                    </template>
                    <!-- end 服务商 -->

                    <template v-else-if="column.formType === 'relationCustomer' && (column.setting || {}).formType === 'cascader'">
                      {{ (scope.row[column.field] || scope.row.attribute[column.field]) | fmt_form_cascader((column.setting || {}).isMulti)}}
                    </template>
                    <template v-else-if="column.formType === 'relationProduct' && (column.setting || {}).formType === 'cascader'">
                      <template v-for="(item, index) in (scope.row[column.field] || scope.row.attribute[column.field] || [])">
                        {{index ? '、' : ''}}{{ item | fmt_form_cascader((column.setting || {}).isMulti)}}
                      </template>
                    </template>

                    <!-- 表单设计器特殊控件 -->
                    <template v-else-if="['cascader', 'select', 'user', 'related_task','relationProduct','location'].includes(column.formType)">
                      {{ $formatFormField(column, scope.row) }}
                    </template>

                    <!-- 用户 -->
                    <template
                      v-else-if="
                        column.formType === 'user' &&
                          scope.row.attribute[column.field]
                      "
                    >
                      {{
                        scope.row.attribute[column.field].displayName ||
                          scope.row.attribute[column.field].name
                      }}
                    </template>

                    <!-- 时间 -->
                    <template v-else-if="!column.isSystem">
                      {{
                        $formatFormField(column, scope.row)
                      }}
                    </template>

                    <!-- 时间 -->
                    <template v-else-if="column.formType === 'datetime'">
                      <template v-if="!column.isSystem">
                        {{
                          $formatFormField(column, scope.row)
                        }}
                      </template>
                      <template v-else>
                        {{ scope.row[column.field] | fmt_datetime }}
                      </template>
                    </template>

                    <div
                      v-else-if="column.formType === 'textarea'"
                      v-html="buildTextarea(scope.row.attribute[column.field])"
                      @click="openOutsideLink"
                    ></div>

                    <!-- 接单用时 -->
                    <template v-else-if="column.field === 'acceptUsedTimeStr'">
                      {{ scope.row.acceptUsedTime && scope.row.acceptUsedTime }}
                    </template>
                    <!-- 工单用时 -->
                    <template v-else-if="column.field === 'taskUsedTimeStr'">
                      {{ scope.row.taskUsedTime && scope.row.taskUsedTime }}
                    </template>
                    <!-- 工作用时 -->
                    <template v-else-if="column.field === 'workUsedTimeStr'">
                      {{ scope.row.workUsedTime && scope.row.workUsedTime }}
                    </template>
                    <!-- 响应用时 -->
                    <template v-else-if="column.field === 'taskResponseTimeStr'">
                      {{
                        scope.row.taskResponseTime && scope.row.taskResponseTime
                      }}
                    </template>
                    <!-- 响应用时 -->
                    <template v-else-if="column.field === 'createToCompleteUsedTimeStr'">
                      {{ scope.row.createToCompleteUsedTime && scope.row.createToCompleteUsedTime }}
                    </template>
                    <!-- 支付方式 -->
                    <template
                      v-else-if="
                        column.field === 'paymentMethod' &&
                          initData.paymentConfig &&
                          initData.paymentConfig.version === 1
                      "
                    >
                      {{
                        scope.row.attribute && scope.row.attribute.paymentMethod
                      }}
                    </template>
                    <template v-else-if="!column.isSystem">
                      <template
                        v-if="
                          scope.row.attribute &&
                            Array.isArray(scope.row.attribute[column.field])
                        "
                      >
                        {{ scope.row.attribute[column.field].join(",") }}
                      </template>
                      <template v-else>
                        {{
                          $formatFormField(column, scope.row)
                        }}
                      </template>
                    </template>
                    <!-- 里程 -->
                    <template v-else-if="['taskEstimatedMileage','estimatedMileage','actualMileage'].includes(column.field)">
                      {{ scope.row[column.field] || 0 }} km
                    </template>

                    <template v-else-if="column.field === 'btnArray' && !scope.row.taskId">
                      <a
                        href
                        :class="`view-detail-btn`"
                        :style="{color: getThemeColor}"
                        @click.stop.prevent="createTaskNow(scope.row, scope.$index)"
                      >{{$t('task.taskTypes.planTask.createNow')}}</a>
                      <a
                        href
                        :class="`view-detail-btn mar-l-10`"
                        :style="{color: getThemeColor}"
                        @click.stop.prevent="changeCreateTime(scope.row, scope.$index)"
                      >{{$t('task.taskTypes.planTask.changeTime')}}</a>
                      <a
                        href
                        :class="`view-detail-btn mar-l-10`"
                        :style="{color: getThemeColor}"
                        @click.stop.prevent="deleteTask(scope.row, scope.$index)"
                      >{{$t('common.base.delete')}}</a>
                    </template>

                    <template v-else>
                      {{ Array.isArray(scope.row[column.field]) ? scope.row[column.field].join(',') : scope.row[column.field] }}
                    </template>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div ref="tableFooterContainer" class="table-footer comment-list-table-footer bbx-normal-table-footer-10">
            <div class="list-info">
              <i18n path="common.base.table.totalCount">
                 <span place="count" class="level-padding">{{ taskPage.totalElements || 0 }}</span>
              </i18n>
              <span class="pad-l-5 pad-r-5">{{$t('task.taskTypes.planTask.createdTaskNumber', {num: createdTaskNumber || 0})}}</span>
              <span class="pad-l-5 pad-r-5">{{$t('task.taskTypes.planTask.uncreatedTaskNumber', {num: uncreatedTaskNumber || 0})}}</span>
              <span class="pad-l-5 pad-r-5">{{$t('task.taskTypes.planTask.finishedTaskNumber', {num: finishedTaskNumber || 0})}}</span>
            </div>
            <el-pagination
              class="comment-list-table-footer-pagination"
              background
              @current-change="jump"
              @size-change="handleSizeChange"
              :page-size="taskPage.pageSize"
              :current-page="taskPage.pageNum"
              layout="prev, pager, next, sizes, jumper"
              :total="taskPage.totalElements"
            >
            </el-pagination>
          </div>
        </div>
        <!-- end content 列表表格 -->
      </div>

      <!-- start 选择列设置 -->
      <biz-select-column ref="advanced" @save="saveColumnStatus" />
      <!-- end 选择列设置 -->

      <!-- start 预计创建时间 -->
      <task-create-time-dialog ref="taskCreateTime" @submit="submitCreateTime"/>
      <!-- end 预计创建时间 -->
      
    </div>
    <!-- E 列表展示 -->

  </div>
</template>

<script>
import TaskList from './TaskList';

export default TaskList;
</script>
<style lang="scss">

.task-list-view {
  .el-loading-mask {
    // loading 层级调低
    z-index: 500 !important;
  }
}
</style>
<style lang="scss" scoped>
@import "./TaskList.scss";
</style>

<style lang="scss" scoped>
.task-box {
  height:100%;
  #novice-wizard{
    width: 240px;
    height: auto;
    position: fixed;
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.5)) !important;
    z-index: 996;
    top: 50px;
    left: 210px;
    border-radius: 4px;
    background: #fff;
    max-height: 400px;
    &::before{
      visibility: visible;
      content: "";
      margin-left: 14px;
      position: absolute;
      width: 10px;
      height: 10px;
      background: inherit; 
      transform: rotate(45deg) translate(0%, -50%);
    }
    .tour-contet-box{
      position: relative;
      overflow: hidden;
      padding: 0 20px;
      border-radius: 4px;
      overflow: hidden;
      text-align: start;
      padding-bottom: 12px;
      .tour-left-tips {
        width: 80px;
        height: 32px;
        color: #fff;
        position: absolute;
        left: -40px;
        top: 0px;
        line-height: 35px;
        font-size: 12px;
        transform-origin: center top;
        transform: rotateZ(-45deg);
        text-align: center;
        background-color: $color-primary-light-6;
      }
      .tour-content-head{
        padding-bottom: 10px;
        padding-top: 16px;
        // display: flex;
        // align-items: center;
        .overHideCon-1 {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
          white-space: normal;
          word-wrap: break-word;
          word-break: break-all;
        }
        .flex-x {
          display: flex;
          align-items: center;
        }
        .flex-1 {
          flex: 1;
        }
        .close-btn{
          font-size: 10px;
          margin-bottom: 2px;
          color: #999;
          cursor: pointer;
      }
      }
      
    }
    .tour-bottom{
      height: 52px;
      padding: 0 20px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      // .now-step{
      //   color: #666;
      // }
      .next-step-button{
        cursor: pointer;
        width: 60px;
        height: 28px;
        color: #fff;
        text-align: center;
        line-height: 28px;
        border-radius: 4px;
        background-color: $color-primary-light-6;
      }
    }
  }
  .v-step[data-v-7c9c03f0] {
    background: #fff !important;
    color: #333 !important;
    -webkit-filter: drop-shadow(
      0px 9px 28px 8px rgba(0, 0, 0, 0.05)
    ) !important;
    filter: drop-shadow(0px 9px 28px 8px rgba(0, 0, 0, 0.05)) !important;
    padding: 0 !important;
    min-width: 240px !important;
    max-width: 350px !important;
  }
  .v-step .v-step__arrow[data-v-7c9c03f0] {
    border-color: #fff !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
  }
  .v-tour-content-box {
    position: relative;
    overflow: hidden;
    padding: 0 20px;
    border-radius: 4px;
    .v-tour-left-tips {
      width: 80px;
      height: 32px;
      background: $color-primary;
      color: #fff;
      position: absolute;
      left: -40px;
      top: 0px;
      line-height: 40px;
      font-size: 12px;
      transform-origin: center top;
      transform: rotateZ(-45deg);
      text-align: center;
    }
    .v-tour-content {
      .v-tour-content-head {
        padding-top: 16px;
        padding-bottom: 10px;
        justify-content: flex-end;
        .iconfont {
          font-size: 10px;
          margin-bottom: 2px;
          color: #999;
          cursor: pointer;
        }
      }
      .v-tour-content-con {
        text-align: start;
        padding-bottom: 12px;
      }
    }
  }

  .v-tour-bottom {
    height: 52px;
    padding: 0 20px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .btns {
      width: 60px;
      height: 28px;
      background: $color-primary;
      color: #fff;
      text-align: center;
      line-height: 28px;
      border-radius: 4px;
    }
    .text {
      @include fontColor();
    }
    :nth-child(n) {
      cursor: pointer;
    }
    :not(:last-child) {
      margin-right: 12px;
    }
  }

  /* 向上的箭头 */

  .normal-arrow-top {
    font-size: 0;
    line-height: 0;
    border-width: 0.5rem;
    border-color: #fff;
    width: 0;
    border-top-width: 0;
    border-style: dashed;
    border-bottom-style: solid;
    border-left-color: transparent;
    border-right-color: transparent;
    position: absolute;
    top: -0.5rem;
  }

  .guide-model-box {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 996;
  }
  .guide-point {
    z-index: 997;
    position: sticky;
  }
  .bg-w {
    background: #fff;
  }
}

::v-deep .el-pagination {
  display: flex;
  width: 100%;
  flex:1;
  justify-content:flex-end;
}
.min-h-440{
  min-height:440px;
}
.viewport-guide {
  background: white;
  padding: 8px 16px;
  border-radius: 4px;
}
.viewport-no-guide {
  padding-left: 16px;
}
</style>
<style lang="scss">
  @import "@src/assets/scss/common-list.scss";
</style>
